<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-if="showFilter('Anormaluser')" label="积分" name="Anormaluser" />
      <el-tab-pane v-if="showFilter('Bkoluser')" label="晶粹" name="Bkoluser" />
      <div class="tab-content">
        <keep-alive>
          <component :is="curTabcompnents[activeName]" :handleClick="handleClick"/>
        </keep-alive>
      </div>
    </el-tabs>
  </div>
</template>

<script>

import JiFen from './components/JiFen.vue'
import JingCui from './components/JingCui.vue'
import { mapGetters } from 'vuex'

export default {
  name: 'Tab',
  components: { JiFen, JingCui },
  data() {
    return {
      activeName: 'Anormaluser',
      curTabcompnents: {}

    }
  },
  computed: {
    ...mapGetters([
      'fatherPower'
    ])
  },
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`)
    },
    fatherPower(val) {
      this.componentsHandle()
    }
  },
  created() {
    this.componentsHandle()
    const tab = this.$route.query.tab
    if (tab) {
      this.activeName = tab
    }
  },

  methods: {
    showFilter(str) {
      const data = Object.keys(this.curTabcompnents)
      if (data.indexOf(str) != -1) {
        return true
      } else {
        return false
      }
    },

    // 动态组件处理
    componentsHandle() {
      const idList = []
      for (let i = 0; i < this.fatherPower.length; i++) {
        if (this.fatherPower[i] == 91) {
          idList.push(91,92)
        }
      }
      const curTabcompnents = [
        {
          id: 91,
          name: 'Anormaluser',
          compnent: 'JiFen'
        },
        {
          id: 92,
          name: 'Bkoluser',
          compnent: 'JingCui'
        }
      ]

      const compnentsData = {}
      for (let k = 0; k < idList.length; k++) {
        const id = idList[k]
        const ItemData = curTabcompnents.find(item => item.id == id)
        compnentsData[ItemData['name']] = ItemData['compnent']
      }
      this.curTabcompnents = compnentsData
      this.activeName = Object.keys(compnentsData)[0]
    },

    handleClick(tab) {
      this.activeName = tab.name
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0px;
}
</style>
